// components/gauge/gauge.js
import * as echarts from '../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    speed: {
      type: Number,
      value: 0.00
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.speed)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.speed)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'speed': function(val){
      this.initchart(val)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-gauge');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart =echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
				})
				// wx.createSelectorQuery().select('.circle02').boundingClientRect((res)=>{
				// 	console.log(res)
				
				// }).exec()
        // echart表格的内容配置
				const gaugeData = [
					{
						value: this.data.speed,
						// name: 'Perfect',
						title: {
							offsetCenter: ['0%', '-30%']
						},
						detail: {
							valueAnimation: true,
							offsetCenter: ['0%', '0%']
						}
					},
				];
				let option = {
					series: [{
						type: 'gauge',
						startAngle: -135,
						endAngle: -405,
						pointer: {
							show: false
						},
						max:500,
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							width:2,
							itemStyle: {
							  color:'#35E9FF'
							  // color:{
							  // 	// image:wx.createSelectorQuery().select('.circle02'),
							  // 	repeat:'no-repeat'
							  // }
							}
						  },
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 10,
								opacity:0.2,
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
							distance: 50
						},
						data: gaugeData,
						detail: {
							fontSize: 30,
							color: '#fff',
							formatter: '{value}',
						}
					}]
				};
        let baifen = option.series[0].data[0].value / option.series[0].max
        // option.series[0].axisLine.lineStyle.color.unshift([baifen,'rgb(76,104,239)'])
        chart.setOption(option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})
